<template>
  <!-- app版本维护 -->
  <div class="app-list-wrap">
    <!-- 查询条件 -->
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-select filterable v-model="searchForm.orgIds" @change="orgChangeSearch" placeholder="请选择业主单位">
            <el-option
              v-for="item in ucOrgList"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select @change="search" v-model="searchForm.synchroThumbnail" placeholder="请选择封面同步状态">
            <el-option label="全部封面同步状态" value=""></el-option>
            <el-option label="同步" value="0"></el-option>
            <el-option label="不同步" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入视频名称"
            v-model="searchForm.videoName"
            @keyup.enter.native="search"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="syncVideoList" >同步视频列表</el-button>
        <el-button type="primary" @click="editDetail(0,{})">新增</el-button>
      </div>
    </el-row>
    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      ref="videoTableList"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="封面" width="80">
        <template slot-scope="scope">
          <img :src="scope.row.picUrl||defaultImg"  width="50" height="50"  @click="$imgPreview" :data-imgpreview="scope.row.picUrl||defaultImg"/>
        </template>
      </el-table-column>
      <el-table-column label="编码" prop="deviceId"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="类型" prop="typeName"></el-table-column>
      <el-table-column label="通道号 " prop="channel"></el-table-column>
      <el-table-column label="经度" prop="latitude"></el-table-column>
      <el-table-column label="纬度" prop="longitude"></el-table-column>
      <el-table-column label="监控类型" prop="shapeName"></el-table-column>
      <el-table-column label="位置" prop="positionTypeName"></el-table-column>
      <el-table-column label="在线状态" prop="isOnline">
        <template slot-scope="scope">
         {{scope.row.isOnline == 1?'在线':'离线'}}
        </template>
      </el-table-column>
      <el-table-column label="封面是否同步">
        <template slot-scope="scope">
         {{scope.row.synchroThumbnail == 1?'不同步':'同步'}}
        </template>
      </el-table-column>
      <el-table-column label="是否连接外网">
        <template slot-scope="scope">
         {{scope.row.internetAccess == 1?'否':'是'}}
        </template>
      </el-table-column>
      <el-table-column label="关联建筑物" width="180">
        <template slot-scope="scope">
          <bind-build :row="scope.row" :buildOptions="buildOptions"></bind-build>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <!-- <el-button @click="showDetail(scope.row)" type="text" size="small">缩略图</el-button>
          <span class="dividing-line">|</span> -->
          <template v-if="scope.row.isCtrl==1">
            <el-button @click="setPerson(scope.row)" type="text" size="small">权限</el-button>
            <span class="dividing-line">|</span>
          </template>
          <el-button @click="editDetail(1,scope.row)" type="text" size="small">编辑</el-button>
          <span class="dividing-line">|</span>
          <el-button @click="deleteAppV(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column type="expand" width='1'>
        <template slot-scope="scope"  v-if="scope.row.picUrl!=''">
            <img :src="scope.row.picUrl" width="400px" height="200px">
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="editTitle"
      width="600px"
      top='5vh'
      v-if="dialogEditInfo"
      :visible.sync="dialogEditInfo"
      @close="closeEditInfo"
      v-dialogDrag>
      <video-info :orgId="searchForm.orgIds" :videoInfo="editVideoInfo" :closeFun="closeEditInfo"></video-info>
    </el-dialog>
    <!-- 权限 -->
    <el-dialog
      :close-on-click-modal="false"
	    :append-to-body="true"
      title="设置人员"
      width="600px"
      top='5vh'
      v-if="dialogPersonInfo"
      :visible.sync="dialogPersonInfo"
      @close="closeSetPerson"
      v-dialogDrag>
      <set-person :orgId="searchForm.orgIds" :personInfo="editPersonInfo" :closeFun="closeSetPerson"></set-person>
    </el-dialog>
  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 150px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
<script>
  import TreeSelect from '@/libs/TreeSelect/Main'
  import { getFbsTree } from '@/api/fbs'
  import { getOrgList} from '@/api/org'
  import { getListExt, delVeidoSet, updateOrgVideo, updateRelateVideoInfo } from '@/api/sysConfig'
  import videoInfo from '../Dialog/VideoInfo'
  import setPerson from '../Dialog/SetPerson'
  import bindBuild from '../Dialog/BindBuild'

  export default {
    name: 'VideoList',
    // 引入子组件
    components: {
      videoInfo,
      setPerson,
      TreeSelect,
      bindBuild
    },
    data() {
      return {
        defaultImg: this.GLOBAL.defaultImg,
      // 建筑物选项
       buildOptions: [],
      //  buildObj:'',
        // visible: false,
        // 平台名称选项
        ucOrgList: [],
        // buildDefaultProps: {
        //   children: 'nodes',
        //   label: 'text',
        //   value: 'id'
        // },
        // buildNodeKey: 'id',
        // defaultCheckedBuildId: [],
        editTitle: "编辑",
        pageLoading: false,
        loading: false,
        dialogEditInfo: false,
        dialogPersonInfo: false,
        // 搜索条件
        searchForm: {
          equiptType: 0,
          orgIds: '',
          synchroThumbnail: '',
          videoName: ''
        },

        buildListInfoForm:{
            buildId: ''
        },
        // 列表数据
        tableData: [],
        // 分页
        currentPage: 1,
        pageSize: 10,
        total: 0,
        editVideoInfo: {},
        editPersonInfo: {}
      }
    },
    created() {//入口
      let that = this
      // 获取业主单位信息
      getOrgList({
          queryType: 0
      }).then(res => {
        if(res.status = 200) {
          that.ucOrgList = res.data.concat()
          if(that.ucOrgList.length > 0) {
              that.searchForm.orgIds = that.ucOrgList[0].organizationId
              that.getFbsList()
          }
        }
        // 加载列表
        that.search()
      })
    },
    methods: {
      // 获取列表数据
      getTableData(pageIndex, pageSize) {
        let that = this
        that.loading = true
        if (pageIndex) {
          that.currentPage = pageIndex
        }
        if (pageSize) {
          that.pageSize = pageSize
        }
        let parames = {
          // queryType: 1,
          equiptType: 0,
          organizationId: that.searchForm.orgIds,
          synchroThumbnail: that.searchForm.synchroThumbnail,
          videoName: that.searchForm.videoName.trim(),
          pageSize: that.pageSize,
          pageIndex: that.currentPage - 1,
        }
        // 获取列表信息
        getListExt(parames).then(res => {
          // for(let i=0;i<res.data.length;i++){
          //       res.data[i].visible = false
          // }
          that.tableData = res.data

          that.total = res.total
          that.loading = false
        })
      },
      getFbsList(){
          // 获取业主单位信息
          getFbsTree({
              organizationId: this.searchForm.orgIds
          }).then(res => {
            if(res.status = 200) {
              this.buildOptions = res.data
            }
          })
      },
      search() {
        this.getTableData(1)
      },
      orgChangeSearch() {
        this.getTableData(1)
        this.getFbsList()
      },
      handleSizeChange(pageSize) {
        this.getTableData(1, pageSize)
      },
      handleCurrentChange(currentPage) {
        this.getTableData(currentPage)
      },
      // 删除
      deleteAppV(row) {
        let that = this
        if (row) {
          that.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            roundButton: true
          }).then(() => {
            // 调用删除接口
            delVeidoSet({
              id: row.id
            }).then(res => {
              if( res.status === 200) {
                that.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                // 刷新列表
                that.getTableData()
              }else{
                that.$message.error(res.info)
              }
            })
          }).catch(() => {
          })
        }
      },
      //详情
      // showDetail(row) {
      //   let that = this

      //   this.$refs.videoTableList.toggleRowExpansion(row)
      // },
      // 编辑
      editDetail(type, row) {
        let that = this
        if(type==0){
          that.editTitle = "新增"
        }else{
          this.editTitle = "编辑"
        }

        if(row) {
          that.editVideoInfo = row
          that.dialogEditInfo = true
        }
      },

      // 关闭编辑弹框
      closeEditInfo(flag) {
        let that = this
        that.dialogEditInfo = false
        if(flag) {
          this.getTableData(this.editVideoInfo.id?'':1)
        }
      },

      // 设置人员
      setPerson(row) {
        if(row) {
          this.editPersonInfo = row
          this.dialogPersonInfo = true
        }
      },

      // 关闭设置人员弹框
      closeSetPerson() {
        let that = this
        that.dialogPersonInfo = false
      },
      // 节点被点击时的回调,返回被点击的节点数据
      handleNodeClick (data, node, item) {
        this.searchForm.organizationId = data.id
        this.$emit('node-click', data, node, item);
        this.search()
      },
      // 同步视频列表
      syncVideoList() {
        let that = this
        that.$confirm('确定要同步吗?', '提示', {
          title:'同步视频列表',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          let parames = {
            organizationId: that.searchForm.orgIds,
            type:0
          }
          that.pageLoading = true
          updateOrgVideo(parames).then(res => {
            if(res.status === 200) {
              that.$message({
                message: '视频列表同步成功！',
                type: 'success'
              })
              that.search()
            } else {
              that.$message({
                message: '视频列表同步失败！',
                type: 'warning'
              })
            }
            that.pageLoading = false
          })
        }).catch(() => {
        })
      },
      //  updateRelateBuild(row){
      //      if(this.buildListInfoForm.buildId){
      //           this.findBuild(this.buildOptions, this.buildListInfoForm.buildId)
      //           updateRelateVideoInfo({
      //             relateObjId: this.buildListInfoForm.buildId,
      //             relateObjType: 2,
      //             videoIds: row.id
      //           }).then(res => {
      //               if( res.status === 200) {
      //               this.$message({
      //                 type: 'success',
      //                 message: '操作成功!'
      //               })
      //               let that = this
      //                row.fbsName = that.buildObj.text
      //             }else{
      //               this.$message.error(res.info)
      //             }
      //           })
      //      }
      //      row.visible = false
      // },
      // findBuild (arr, id){
      //   try {
      //           arr.forEach((item) => {
      //                if(item.id==id)
      //                {
      //                    this.buildObj = item
      //                    throw new Error('exist')
      //                }
      //                else if(item.nodes.length > 0)
      //                {
      //                    this.findBuild(item.nodes, id);
      //                }
      //           })
      //       } catch (e) {
      //       }
      //   },
        // selectAddBuild (row){
        //     this.defaultCheckedBuildId = row.relateObjId.toString().split(',')
        // },
    }
  }
</script>
